<template>
  <div class="web_video">
    <div :id="'glplayer_' + itemId" @dblclick="bigFullScreen" class="glplayer">
      <div class="video_console">
        <div class="left">

        </div>
        <div class="right">
          <div class="yl" style="margin-right:5px;">
            <img src="@/assets/images/mute.png" @click="setPlayerYinl(1)" v-if="muteValue === 0">
            <img src="@/assets/images/yinl.png" @click="setPlayerYinl(0)" v-if="muteValue === 1">
          </div>
          <FullscreenOutlined @click="bigFullScreen" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, watch, ref, onMounted, onUnmounted, nextTick } from 'vue';
import { FullscreenOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  name: "webVideo",
  components: { FullscreenOutlined },
  props: {
    videoUrl: {
      type: String,
      default: ""
    },
    itemId: {
      type: String,
      default: +new Date()
    },
  },
  setup(props) {
    const { videoUrl } = props
    const { isPlay } = ref<boolean>(false)
    const videoInstance = ref<any>(null)
    const itemId = ref<any>("")
    const muteValue = ref<any>(1)
    const dataNow = +new Date()

    itemId.value = +new Date()


    onMounted(() => {

      initPlayer()

    })

    onUnmounted(() => {
      removePlayer()
    })

    watch(() => props.videoUrl, n => {
      if (n) {
        if (videoInstance.value) {
          removePlayer()
        }
        initPlayer()
      }
    })

    const initPlayer = () => {

      var config = {
        player: "glplayer_" + itemId.value,
        accurateSeek: true,
        token: "base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1",
        extInfo: {
          readyShow: false,
          rawFps: 30,
          autoCrop: false,
          autoPlay: true,
          core: 0
        }
      };

      videoInstance.value = window.new265webjs(videoUrl, config)


      const player = videoInstance.value

      player.do()

      player.onLoadFinish = () => {
        player.play()
      }
    }

    const setPlayerYinl = (value) => {
      videoInstance.value.setVoice(value)
      muteValue.value = value
    }

    const bigFullScreen = () => {
      videoInstance.value.fullScreen();
    }

    const removePlayer = () => {
      videoInstance.value.release()
      videoInstance.value = null
    }

    return {
      isPlay,
      itemId,
      muteValue,
      bigFullScreen,
      setPlayerYinl
    }
  }
})

</script>

<style lang="scss" scoped>
.web_video {
  position: relative;
  width: 100%;
  height: 100%;


  &:hover {
    .video_console {
      opacity: 1;
    }
  }

  .video_console {
    display: flex;
    position: absolute;
    z-index: 90;
    right: 0;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 15%;
    min-height: 20px;
    padding: 0 5px;
    transition: all .3s ease;
    opacity: 0;
    background: rgb(0 0 0 / 50%);
    color: #fff;
    cursor: pointer;

    .right {
      display: flex;
    }

    img {
      width: 15px;
      height: 15px;
    }
  }

  .no_viewo {
    padding-top: 30px;
    text-align: center;
  }

  ::v-deep .glplayer {
    width: 100% !important;
    height: 100% !important;

    video {
      width: 100% !important;
      height: 100% !important;
    }
  }
}
</style>